<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BSN Testing Page</title>
  <link id="bsCSS" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main>
    <h3>Iframe Tooltip Examples</h3>
    <div class="btn-toolbar">
      <button type="button" class="btn btn-primary me-1 mb-1" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Left Tooltip">Left</button>
      <a href="#" id="tooltipWithEvents" class="btn btn-dark me-1 mb-1" data-bs-toggle="tooltip" data-bs-placement="top" title="<b>Tooltip on top</b><br>This tooltip example is inside an iframe">Top</a>
      <button type="button" class="btn btn-secondary me-1 mb-1" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">Bottom</button>
      <button type="button" class="btn btn-success me-1 mb-1" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="<b>Tooltip on right</b><br>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">Right</button>
      <button type="button" class="btn btn-warning me-1 mb-1" data-bs-toggle="tooltip" data-bs-trigger="click" data-bs-title="<b>Tooltip only on click</b> <span class='badge bg-success'>NEW</span><br/>How cool is that!">Click</button>
      <button type="button" class="btn btn-danger me-1 mb-1" data-bs-toggle="tooltip" data-bs-title="<b>Tooltip galore!</b> <span class='badge bg-danger'>HOT</span><br>This tooltip will be added to a position: relative container.">Button</button>
      <button type="button" class="btn btn-outline-secondary position-absolute me-1 mb-1 d-none" style="top:0; right: 0;" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on absolute position element. This requires a 'position: relative' container.">Absolute</button>
      <input style="max-width: 100px; display: inline; vertical-align: bottom;" type="text" value="" class="form-control me-1 mb-1" placeholder="Focus me" data-bs-toggle="tooltip" data-bs-title="Tooltip only on focus" data-bs-trigger="focus">
      <div class="position-static d-flex">
        <button type="button" class="btn btn-info me-1 mb-1" data-bs-toggle="tooltip" data-bs-title="<b>Tooltip in static container</b><br>This tooltip is added to a 'position: static' container.">Static</button>
      </div>
      <svg viewBox="0 0 80 43" width="80" height="43" xmlns="http://www.w3.org/2000/svg" class="me-1 mb-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="<b>Demo Tooltip for </b> <span class='badge bg-success'>SVG</span><br>Perhaps adding even more content would make the job more difficult? Nope, same as if this was a very very short tooltip. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">
        <rect fill="rgba(0,0,0,0.01)" stroke="#ccc" stroke-width="1" width="100%" height="100%" rx="5"></rect>
        <text direction="ltr" fill="#333" x="25" y="25" font-size="14">SVG</text>
      </svg>
      <img class="me-1 mb-1" data-bs-toggle="tooltip" data-bs-placement="top" alt="Demo Tooltip for IMG" src="" title="<b>Demo Tooltip for </b> <span class='badge bg-info'>IMG</span><br>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">
    </div>
    <p>This iframe is intentionally larger.</p>
  </main>
  <script src="./assets/js/bootstrap-native.js"></script>
</body>
</html>
